<template>
  <el-card class="operation-container">
    <div class="search">
      <el-select
        v-model="search.logType"
        class="name"
        @change="selectChange"
        clearable
        placeholder="请选择操作类型"
        size="small"
      >
        <el-option
          v-for="item in logTypeArr"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
    <el-table :data="data" size="mini" border v-loading="tableLoading">
      <el-table-column
        :show-overflow-tooltip="true"
        label="序号"
        width="80"
        prop="renderIndex"
        align="center"
      ></el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        label="用户名"
        width="100"
        prop="creatorName"
        align="center"
      ></el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        label="操作类型"
        width="100"
        prop="logType"
        align="center"
      >
        <template slot-scope="scope">{{logTypeShow(scope.row.logType)}}</template>
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        label="操作对象"
        width="120"
        prop="logObject"
        align="center"
      ></el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        label="操作时间"
        width="200"
        prop="createTime"
        align="center"
      ></el-table-column>
      <el-table-column :show-overflow-tooltip="true" label="访问路径" prop="logUrl" align="center"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" label="日志内容" prop="logInfo" align="center"></el-table-column>
      <el-table-column label="操作" width="150" prop="action" align="center">
        <template slot-scope="scope">
          <div>
            <el-button size="mini" type="text" @click="handleDetail(scope.row)">查看</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSize"
      @current-change="handleCurrent"
      :current-page="search.currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="search.pageSize"
      background
      layout="total, prev, pager, next, sizes, jumper"
      :total="search.total"
    ></el-pagination>
  </el-card>
</template>

<script>
export default {
  name: "developList",
  data() {
    return {
      logTypeArr: [
        {
          value: 1,
          label: "新增"
        },
        {
          value: 2,
          label: "删除"
        },
        {
          value: 3,
          label: "更新"
        },
        {
          value: 4,
          label: "查询"
        },
        {
          value: 5,
          label: "导出"
        }
      ], // 操作类型
      tableLoading: false,
      data: [
        // {
        //   id: '9709',
        //   logType: 1,
        //   logObject: "事件概览",
        //   logInfo: "AAAA",
        //   logUrl: "AAAA",
        //   userId: "AAAA",
        //   creatorName: "joker",
        //   remark: "AAAA",
        //   org_code: "AAAA",
        //   createTime: "2021-07-08 01:49:22",
        // }
      ],
      search: {
        logType: null,
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    };
  },
  created() {
    this.handleQueryList();
  },
  methods: {
    logTypeShow(val) {
      let str = "";
      this.logTypeArr.map(_i => {
        if (_i.value == val) {
          str = _i.label;
        }
      });
      return str;
    },
    // 查询开发需求列表
    async handleQueryList() {
      this.tableLoading = true;
      let { logType, currentPage, pageSize } = this.search;
      let data = {
        logType,
        currentPage,
        pageSize
      };
      try {
        let res = await this.$operationApi.logList(data);
        if (res) {
          let { list, total } = res.value;
          list.map((_i, _in) => {
            _i.renderIndex =
              (res.value.currentPage - 1) * res.value.pageSize + _in + 1;
          });
          this.data = list;
          this.search.total = total;
        }
        this.tableLoading = false;
      } catch (e) {
        this.tableLoading = false;
      }
    },
    selectChange() {
      this.search.currentPage = 1;
      this.handleQueryList();
    },
    handleCurrent(val) {
      this.search.currentPage = val;
      this.handleQueryList();
    },
    handleSize(val) {
      this.search.currentPage = 1;
      this.search.pageSize = val;
      this.handleQueryList();
    },
    handleDetail(obj) {
      this.$router.push({ path: "list/item", query: { id: obj.id } }); // 路径传入书签Id
    }
  }
};
</script>

<style scoped lang="scss">
.operation-container {
  .search {
    .name {
      width: 350px;
      margin-left: 5px;
    }
  }

  .status-success {
    color: #f5a753;
  }

  .status-error {
    /*color: #f5a753;*/
  }

  .title {
    font-weight: 500;
  }
}
</style>
